<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="renderer" content="webkit" />
  <meta name="full-screen" content="yes" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="format-detection" content="telphone=no, email=no" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <title>ANDREW插件</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/theme.default.css" />
  <link rel="stylesheet" type="text/css" href="css/andrew.mobile.plugin.min.css" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/data.js"></script>
  <script type="text/javascript" src="js/andrew.mobile.plugin.min.js"></script>
  <script type="text/javascript" src="js/andrew.router.js"></script>
  <script type="text/javascript" src="js/common.js"></script>
</head>
<body>

<!----------Andrew_PopupWin---------->
<header class="press bor_bottom bor_gray_ddd bg_gray_f9f">
  <h1 class="text_al_c">ANDREW插件</h1>
  <button type="button" class="right_0 w_25 pr_3 text_al_r text_12em" id="plug_menu"><i class="text_14em ion ion-navicon"></i></button>
</header>

<main>

  <!----------Andrew_Typeahead---------->
  <form action="#" method="get" onsubmit="return false;">
    <div class="module press ovh bg_white bor_bottom bor_gray_ddd">
      <fieldset class="ml_3 mr_3 pl_2em rel h_24em mt_05em mb_05em ovh bor_rad_05em border bor_gray_ddd bg_gray_f9f">
        <i class="abs left_0 ml_03em text_14em c_gray_999 line_h_18em ion ion-search"></i>
        <input type="search" class="plug_Typeahead c_gray_777 w_100 h_in" placeholder="请输入搜索关键词（例：北京）" value="" />
      </fieldset>
    </div>
  </form>

  <!----------Andrew_Slider---------->
  <div class="plug_slider w_100 h_12_em ovh rel">
    <ul>
      <li><img src="img/tibet-1.jpg"></li>
      <li><img src="img/tibet-2.jpg"></li>
      <li><img src="img/tibet-3.jpg"></li>
    </ul>
  </div>

  <!----------Andrew_Tabs---------->
  <div class="plug_tabs mt_5">
    <nav class="ovh press bg_white">
      <ul class="ovh list_h_3em nav_line">
        <li class="fl rel pl_1em pr_1em text_al_c bor_bottom2 bor_title c_title pointer touchstart">Tab-1</li> <!--增加id="plug_tab1" 可使用Ajax请求-->
        <li class="fl rel pl_1em pr_1em text_al_c bor_bottom bor_gray_ddd pointer touchstart">Tab-2</li> <!--增加id="plug_tab2" 可使用Ajax请求-->
        <li class="fl rel pl_1em pr_1em text_al_c bor_bottom bor_gray_ddd pointer touchstart">Tab-3</li> <!--增加id="plug_tab3" 可使用Ajax请求-->
        <li class="fl rel pl_1em pr_1em text_al_c bor_bottom bor_gray_ddd pointer touchstart">Tab-4</li> <!--增加id="plug_tab4" 可使用Ajax请求-->
      </ul>
    </nav>
    <article class="rel ovh">
      <div class="rel ovh bg_white">
        <section class="rel ovh">
          <div class="ma_3 c_gray_777 line_h_18em"> <!--增加id="plug_ajax1" 可使用Ajax请求-->
            欢迎使用Andrew移动端jQuery插件。<br>
            请左右滑动该区域切换Tabs的内容。<br>
            当前内容是Tabs的第一个页面1。
          </div>
        </section>
        <section class="rel ovh">
          <div class="ma_3 c_gray_777 line_h_18em"> <!--增加id="plug_ajax2" 可使用Ajax请求-->
            欢迎使用Andrew移动端jQuery插件。<br>
            请左右滑动该区域切换Tabs的内容。<br>
            当前内容是Tabs的第二个页面2。
          </div>
        </section>
        <section class="rel ovh">
          <div class="ma_3 c_gray_777 line_h_18em"> <!--增加id="plug_ajax3" 可使用Ajax请求-->
            欢迎使用Andrew移动端jQuery插件。<br>
            请左右滑动该区域切换Tabs的内容。<br>
            当前内容是Tabs的第三个页面3。
          </div>
        </section>
        <section class="rel ovh">
          <div class="ma_3 c_gray_777 line_h_18em"> <!--增加id="plug_ajax4" 可使用Ajax请求-->
            欢迎使用Andrew移动端jQuery插件。<br>
            请左右滑动该区域切换Tabs的内容。<br>
            当前内容是Tabs的第四个页面4。
          </div>
        </section>
      </div>
    </article>
  </div>

  <!----------Andrew_StepOrder---------->
  <div class="module list press mt_5">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">步骤效果</h3>
    <article class="plug_step pa_3 bg_white dis_none">
      <ul class="length4">
        <li>
          <strong class="wh_3em line_h_3em bg_gray_ccc c_white border2 bor_white bor_rad_50">1</strong>
          <h6 class="c_gray_777 line_h_24em">同意条款</h6>
        </li>
        <li>
          <strong class="wh_3em line_h_3em bg_gray_ccc c_white border2 bor_white bor_rad_50">2</strong>
          <h6 class="c_gray_777 line_h_24em">提交信息</h6>
        </li>
        <li>
          <strong class="wh_3em line_h_3em bg_gray_ccc c_white border2 bor_white bor_rad_50">3</strong>
          <h6 class="c_gray_777 line_h_24em">验证信息</h6>
        </li>
        <li>
          <strong class="wh_3em line_h_3em bg_gray_ccc c_white border2 bor_white bor_rad_50">4</strong>
          <h6 class="c_gray_777 line_h_24em">已完成</h6>
        </li>
      </ul>
    </article>
  </div>

  <!----------Andrew_Dialog & Andrew_PopupWin---------->
  <div class="module press bg_white mt_5 pb_5">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">按钮效果</h3>
    <button type="button" class="mt_5 btn_h_au wm_94 bg_title c_white h_32em" id="plug_popup">Popup Window</button>
    <button type="button" class="mt_5 btn_h_au wm_94 bg_title c_white h_32em" id="plug_webToast">Webtoast</button>
    <button type="button" class="mt_5 btn_h_au wm_94 bg_title c_white h_32em" id="plug_alert">Alert Dialog Box</button>
    <button type="button" class="mt_5 btn_h_au wm_94 bg_title c_white h_32em" id="plug_confirm">Confirm Dialog Box</button>
  </div>
  <div class="module press mt_5">
    <ul class="list_h_36em">
      <li class="rel bg_white touchstart">
        <dl class="rel h_in list_h_36em wm_94">
          <dt class="fl">姓名</dt>
          <dd class="fr rel w_70 mr_4">
            <input class="fr bg_white c_gray_777" id="plug_prompt_input" type="button" value="" readonly />
          </dd>
          <dd class="abs top_0 right_0">
            <i class="fr ion ion-ios-arrow-right text_16em c_gray_777"></i>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
  <div id="plug_prompt_textarea_view" class="module list press mt_5">
    <h3 class="wp_94 bg_white line_h_36em text_bold bor_bottom_dashed bor_gray_ddd">提问内容</h3>
    <ul class="wp_94 bg_white list_h_36em">
    </ul>
    <button type="button" class="btn_h_au wm_94 bg_title c_white h_32em mt_5" id="plug_prompt_textarea">继续提问</button>
  </div>

  <!----------Andrew_Radio&Andrew_Checkbox&Andrew_Switch---------->
  <div class="module list press mt_5">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">复选展示</h3>
    <ul class="list_h_36em">
      <li class="bor_bottom bor_gray_ddd bg_white touchstart">
        <dl class="h_in">
          <dt class="fl ml_3 h_in">
            <input type="checkbox" name="checkbox1" class="plug_Checkbox" />
          </dt>
          <dd class="fl h_in ml_05em">选项1</dd>
        </dl>
      </li>
      <li class="bor_bottom bor_gray_ddd bg_white touchstart">
        <dl class="h_in">
          <dt class="fl ml_3 h_in">
            <input type="checkbox" name="checkbox2" class="plug_Checkbox" checked />
          </dt>
          <dd class="fl h_in ml_05em">选项2</dd>
        </dl>
      </li>
      <li class="bg_white bor_bottom bor_gray_ddd">
        <dl class="h_in">
          <dt class="fl ml_3 h_in">
            <input type="checkbox" name="checkbox3" class="plug_Checkbox" disabled />
          </dt>
          <dd class="fl h_in ml_05em">选项3</dd>
        </dl>
      </li>
    </ul>
  </div>
  <div class="module list press mt_5">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">单选展示</h3>
    <ul class="list_h_36em">
      <li class="bor_bottom bor_gray_ddd bg_white touchstart">
        <dl class="h_in">
          <dt class="fl ovh ml_3 h_in">选项1</dt>
          <dd class="fr mr_3 h_in text_14em">
            <input type="radio" name="radio" value="1" class="plug_Radio" checked />
          </dd>
        </dl>
      </li>
      <li class="bor_bottom bor_gray_ddd bg_white touchstart">
        <dl class="h_in">
          <dt class="fl ovh ml_3 h_in">选项2</dt>
          <dd class="fr mr_3 h_in text_14em">
            <input type="radio" name="radio" value="2" class="plug_Radio" />
          </dd>
        </dl>
      </li>
    </ul>
  </div>
  <div class="module list press mt_5">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">开关按钮</h3>
    <ul class="list_h_36em">
      <li class="bor_bottom bor_gray_ddd bg_white">
        <dl class="h_in">
          <dt class="fl ovh ml_3 h_in">选项1</dt>
          <dd class="fr mr_3 h_in">
            <input type="checkbox" name="switch1" class="plug_Switch" checked />
          </dd>
        </dl>
      </li>
      <li class="bor_bottom bor_gray_ddd bg_white">
        <dl class="h_in">
          <dt class="fl ovh ml_3 h_in">选项2</dt>
          <dd class="fr mr_3 h_in">
            <input type="checkbox" name="switch2" class="plug_Switch" />
          </dd>
        </dl>
      </li>
      <li class="bor_bottom bor_gray_ddd bg_white">
        <dl class="h_in">
          <dt class="fl ovh ml_3 h_in">选项3</dt>
          <dd class="fr mr_3 h_in">
            <input type="checkbox" name="switch3" class="plug_Switch" checked disabled />
          </dd>
        </dl>
      </li>
      <li class="bor_bottom bor_gray_ddd bg_white">
        <dl class="h_in">
          <dt class="fl ovh ml_3 h_in">选项4</dt>
          <dd class="fr mr_3 h_in">
            <input type="checkbox" name="switch4" class="plug_Switch" disabled />
          </dd>
        </dl>
      </li>
    </ul>
  </div>

  <!----------Andrew_ChooseList---------->
  <div class="module press mt_5">
    <h3 class="bg_white c_title pl_3 line_h_36em">品牌选择</h3>
    <ul class="list_h_36em">
      <li class="bor_top bor_gray_ddd bg_white">
        <dl class="ovh list_h_36em">
          <dt class="fl ovh ml_3 mr_03em">单选：</dt>
          <dd class="fl ovh w_80">
            <ul class="plug_choose mt_05em c_gray_777">
              <li class="fl pl_3 pr_3 mr_05em border bg_white bor_rad_03em bor_gray_ddd line_h_24em pointer" data-checked="true">戴尔</li>
              <li class="fl pl_3 pr_3 mr_05em border bg_white bor_rad_03em bor_gray_ddd line_h_24em pointer">三星</li>
              <li class="fl pl_3 pr_3 mr_05em border bg_white bor_rad_03em bor_gray_ddd line_h_24em pointer">惠普</li>
              <li class="fl pl_3 pr_3 mr_05em border bg_white bor_rad_03em bor_gray_ddd line_h_24em pointer">微软</li>
            </ul>
          </dd>
        </dl>
      </li>
      <li class="bor_top bor_gray_ddd bg_white">
        <dl class="ovh list_h_36em">
          <dt class="fl ovh ml_3 mr_03em">多选：</dt>
          <dd class="fl ovh w_80">
            <ul class="plug_choose mt_05em c_gray_777" data-multiple="multiple">
              <li class="fl pl_3 pr_3 mr_05em border bg_white bor_rad_03em bor_gray_ddd line_h_24em pointer" data-checked="true">东芝</li>
              <li class="fl pl_3 pr_3 mr_05em border bg_white bor_rad_03em bor_gray_ddd line_h_24em pointer" data-checked="true">松下</li>
              <li class="fl pl_3 pr_3 mr_05em border bg_white bor_rad_03em bor_gray_ddd line_h_24em pointer">苹果</li>
              <li class="fl pl_3 pr_3 mr_05em border bg_white bor_rad_03em bor_gray_ddd line_h_24em pointer">联想</li>
            </ul>
          </dd>
        </dl>
      </li>
    </ul>
  </div>

  <!----------Andrew_TouchDelete---------->
  <div class="module list press mt_5">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">滑动删除</h3>
    <ul class="plug_touchdel bg_white ovh">
      <li class="h_42em rel ovh bor_bottom bor_gray_ddd bg_white touchstart">
        <article class="ml_3">
          <h3 class="mt_05em c_gray_333">1.这里是文章的标题</h3>
          <p class="line_h_18em c_gray_777">当前显示的是列表展示内容</p>
        </article>
      </li>
      <li class="h_42em rel ovh bor_bottom bor_gray_ddd bg_white touchstart">
        <article class="ml_3">
          <h3 class="mt_05em c_gray_333">2.这里是文章的标题</h3>
          <p class="line_h_18em c_gray_777">当前显示的是列表展示内容</p>
        </article>
      </li>
      <li class="h_42em rel ovh bor_bottom bor_gray_ddd bg_white touchstart">
        <article class="ml_3">
          <h3 class="mt_05em c_gray_333">3.这里是文章的标题</h3>
          <p class="line_h_18em c_gray_777">当前显示的是列表展示内容</p>
        </article>
      </li>
      <li class="h_42em rel ovh bor_bottom bor_gray_ddd bg_white touchstart">
        <article class="ml_3">
          <h3 class="mt_05em c_gray_333">4.这里是文章的标题</h3>
          <p class="line_h_18em c_gray_777">当前显示的是列表展示内容</p>
        </article>
      </li>
    </ul>
  </div>

  <!----------Andrew_ChangeIcon---------->
  <div class="module list press mt_5">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">排序和筛选</h3>
    <div class="plug_filter rel ovh bg_white wp_94 h_32em bor_bottom bor_gray_ddd">
      <ul class="length4 list_h_32em h_in">
        <li class="fl text_al_c touchstart plug_sort_btn1">
          <strong class="text_al_t c_gray_777">智能排序</strong>
        </li>
        <li class="fl text_al_c touchstart plug_sort_btn2">
          <strong class="text_al_t c_gray_777">销量</strong>
          <button type="button" class="line_h_in text_al_s text_al_c c_gray_777">
            <i class="abs minus_mt_05em ion ion-arrow-up-b"></i>
            <i class="ion ion-arrow-down-b"></i>
          </button>
        </li>
        <li class="fl text_al_c touchstart plug_sort_btn3">
          <strong class="text_al_t c_gray_777">价格</strong>
          <button type="button" class="line_h_in text_al_s text_al_c c_gray_777">
            <i class="abs minus_mt_05em ion ion-arrow-up-b"></i>
            <i class="ion ion-arrow-down-b"></i>
          </button>
        </li>
        <li class="fl text_al_c touchstart plug_sort_btn4">
          <strong class="text_al_t c_gray_777">筛选</strong>
          <button type="button" class="line_h_in text_al_m text_al_c c_gray_777">
            <i class="ion ion-chevron-down"></i>
          </button>
        </li>
      </ul>
    </div>
  </div>

  <!----------Andrew_Ratyli---------->
  <div class="module list press mt_5">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">星级评分</h3>
    <ul class="list_h_36em">
      <li class="bor_bottom bor_gray_ddd bg_white">
        <dl class="ovh h_in">
          <dt class="fl ovh ml_3 mr_03em">可选评价：</dt>
          <dd class="fl ovh">
            <div class="line_h_in ovh">
              <span id="plug_ratyli1" data-rate="1" data-ratemax="5"></span>
            </div>
          </dd>
        </dl>
      </li>
      <li class="bor_bottom bor_gray_ddd bg_white">
        <dl class="ovh h_in">
          <dt class="fl ovh ml_3 mr_03em">展示评价：</dt>
          <dd class="fl ovh">
            <div class="line_h_in ovh">
              <span id="plug_ratyli2" data-rate="4" data-ratemax="5"></span>
            </div>
          </dd>
        </dl>
      </li>
    </ul>
  </div>

  <!----------Andrew_Progress---------->
  <div class="module press mt_5">
    <ul class="list_h_36em">
      <li class="ovh rel bg_white">
        <dl class="ovh h_in">
          <dt class="fl ovh ml_3 mr_03em">当前进度：</dt>
          <dd class="fl ovh w_70 h_in">
            <div class="plug_progress h_2em bg_gray_ddd"></div>
          </dd>
        </dl>
      </li>
    </ul>
  </div>

  <!----------Andrew_NowTime---------->
  <!----------Andrew_CountTo---------->
  <!----------Andrew_Countdown---------->
  <div class="module list press mt_5">
    <ul class="list_h_36em">
      <li class="bor_bottom bor_gray_ddd bg_white">
        <span class="fl ml_3 mr_03em">当前时间：</span>
        <em class="plug_nowtime c_gray_777"></em>
      </li>
      <li class="bor_bottom bor_gray_ddd bg_white touchstart">
        <span class="fl ml_3 mr_03em">点击开始：</span>
        <em class="plug_count c_title" data-form="0.00" data-to="999.00" data-speed="1500" data-decimals="2"></em>
      </li>
      <li class="bor_bottom bor_gray_ddd bg_white touchstart">
        <span class="fl ml_3 mr_03em">点击倒计时：</span>
        <em class="plug_Countdown c_title">10秒</em>
      </li>
    </ul>
  </div>

  <!----------Andrew_Favorite---------->
  <div class="module bg_white press mt_5">
    <ul class="wm_94 list_h_36em length2">
      <li class="fl">
        <button type="button" class="fl pl_1em pr_1em plug_like c_gray_777 line_h_36em touchstart" data-value="500"></button>
      </li>
      <li class="fr">
        <button type="button" class="fr pl_1em pr_1em plug_collect c_gray_777 line_h_36em touchstart" data-value="0"></button>
      </li>
    </ul>
  </div>

  <!----------Andrew_Substring---------->
  <div class="module press mt_5">
      <ul class="list_h_36em">
        <li class="ovh rel bg_white touchstart">
          <dl class="rel h_in list_h_36em wm_94">
            <dt class="fl">产品价格</dt>
            <dd class="fr rel w_70 mr_4">
              <span class="fr c_gray_777 ml_05em">元</span>
              <input type="number" class="plug_RMBoutput fr bg_white c_gray_777" required value="" pattern="(\d{5}([-]\d{4})?)" />
            </dd>
            <dd class="abs top_0 right_0">
              <i class="fr ion ion-ios-arrow-right text_16em c_gray_777"></i>
            </dd>
          </dl>
        </li>
    </ul>
  </div>
  <!----------Andrew_Spinner---------->
  <div class="module press mt_5">
    <ul class="list_h_36em">
      <li class="rel bg_white">
        <dl class="h_in">
          <dt class="fl ml_3">产品数量</dt>
          <dd class="fr w_35 mr_3 h_in">
              <input type="number" class="plug_spinner text_al_c c_gray_777 bor_rad_0" value="1" pattern="[0-9]*" />
          </dd>
        </dl>
      </li>
    </ul>
  </div>

  <!----------Andrew_ChangeInput---------->
  <div class="module press mt_5">
    <ul class="list_h_36em">
      <li class="rel bg_white">
        <dl class="h_in">
          <dt class="fl ml_3">切换城市</dt>
          <dd class="fr w_60 mr_3 h_in">
            <div class="rel mt_06em h_24em border bor_gray_ddd w_100 bg_gray_f9f">
              <input type="text" class="plug_change_text1 fl w_35 h_in text_al_c c_gray_777 bor_rad_0" value="北京市">
              <button type="button" class="plug_change_btn fl w_30 h_in bor_left bor_right bor_gray_ddd bg_white ion ion-arrow-swap"></button>
              <input type="text" class="plug_change_text2 fl w_35 h_in text_al_c c_gray_777 bor_rad_0" value="上海市">
            </div>
          </dd>
        </dl>
      </li>
    </ul>
  </div>

  <!----------Andrew_Form---------->
  <!----------Andrew_Validate---------->
  <!----------Andrew_GetVerifyCode---------->
  <!----------Andrew_intlTelInput---------->
  <!----------Andrew_Codeval---------->
  <form action="demo.html" method="get">
    <div class="module list mt_5 plug_validate">
      <ul class="wp_94 press bg_white list_h_36em">
        <li class="rel bor_bottom bor_gray_ddd">
          <i class="abs ion ion-android-phone-portrait c_title text_16em"></i>
          <label class="plug_mobileNum dis_block rel ovh fl ml_6 pr_05em mr_05em line_h_in bor_right bor_gray_eee touchstart">
            <input type="button" class="fl c_gray_777" value="+86" />
            <i class="fl ml_05em ion ion-ios-arrow-right text_16em c_gray_777"></i>
          </label>
          <input type="tel" id="plug_phone" class="fl w_70 plug_Delete c_gray_777" required value="" maxlength="11" placeholder="请输入手机号码" pattern="[0-9]*" />
        </li>
        <li class="rel bor_bottom bor_gray_ddd">
          <i class="abs ion ion-ios-compose c_title text_16em"></i>
          <input type="text" class="fl ml_6 w_94 c_gray_777" required value="" maxlength="6" placeholder="请输入手机短信验证码" />
          <button type="button" id="plug_getVerifyCode" class="press abs bg_white press top_0 right_0 c_title">获取验证码</button>
        </li>
        <li class="rel bor_bottom bor_gray_ddd">
          <i class="abs ion ion-document-text c_title text_16em"></i>
          <input type="text" id="plug_codeInput" class="fl ml_6 w_94 c_gray_777" required value="" placeholder="请输入右侧验证码" />
          <code id="plug_codeView" class="ovh press abs right_0 bg_white w_20 line_h_2em border bor_gray_ddd touchstart"></code>
        </li>
        <li class="rel bor_bottom bor_gray_ddd">
          <i class="abs ion ion-android-lock c_title text_16em"></i>
            <input type="password" class="fl ml_6 w_94 c_gray_777 plug_PassCheck plug_Password" required value="" maxlength="16" placeholder="请输入新密码" />
        </li>
        <li class="rel bor_bottom bor_gray_ddd">
          <i class="abs ion ion-android-lock c_title text_16em"></i>
            <input type="password" class="fl ml_6 w_94 c_gray_777 plug_PassCheck plug_Password" required value="" maxlength="16" placeholder="请输入确认密码" />
        </li>
      </ul>
      <button type="submit" class="btn_h_3em wm_94 bg_title c_white mt_5 h_32em">提交</button>
    </div>
  </form>

  <!----------Andrew_PortraitImage---------->
  <!----------Andrew_Select---------->
  <!----------Andrew_Datetime---------->
  <div class="module list press mt_5">
    <ul class="list_h_36em">
      <li class="rel bor_bottom bor_gray_ddd bg_white touchstart">
        <dl class="rel h_in list_h_36em wm_94">
          <dt class="fl">上传头像</dt>
          <dd class="fr rel w_70 mr_4">
            <label class="fr rel plug_PortraitImage pointer">
              <input type="file" />
              <figure class="img_auto ovh wh_24em line_h_24em text_al_c bg_gray_ddd border bor_gray_ddd">
                <i class="ion ion-ios-person c_white text_18em text_al_m"></i>
              </figure>
            </label>
          </dd>
          <dd class="abs top_0 right_0">
            <i class="fr ion ion-ios-arrow-right text_16em c_gray_777"></i>
          </dd>
        </dl>
      </li>
      <li class="rel bor_bottom bor_gray_ddd bg_white touchstart">
        <dl class="rel h_in list_h_36em wm_94">
          <dt class="fl">选择星期</dt>
          <dd class="fr rel w_70 mr_4">
            <input type="button" id="plug_trigger1" class="fr bg_white c_gray_777" name="plug_trigger1" readonly value="星期日" placeholder="请选择星期" />
          </dd>
          <dd class="abs top_0 right_0">
            <i class="fr ion ion-ios-arrow-right text_16em c_gray_777"></i>
          </dd>
        </dl>
      </li>
      <li class="rel bor_bottom bor_gray_ddd bg_white touchstart">
        <dl class="rel h_in list_h_36em wm_94">
          <dt class="fl">选择地区</dt>
          <dd class="fr rel w_70 mr_4">
            <input type="button" id="plug_trigger2" class="fr bg_white c_gray_777" name="plug_trigger2" readonly value="" placeholder="请选择地区" />
          </dd>
          <dd class="abs top_0 right_0">
            <i class="fr ion ion-ios-arrow-right text_16em c_gray_777"></i>
          </dd>
        </dl>
      </li>
      <li class="rel bor_bottom bor_gray_ddd bg_white touchstart">
        <dl class="rel h_in list_h_36em wm_94">
          <dt class="fl">选择日期</dt>
          <dd class="fr rel w_70 mr_4">
            <input type="button" id="plug_datetime" class="fr bg_white c_gray_777" readonly value="" placeholder="请选择日期" />
          </dd>
          <dd class="abs top_0 right_0">
            <i class="fr ion ion-ios-arrow-right text_16em c_gray_777"></i>
          </dd>
        </dl>
      </li>
      <li class="rel bor_bottom bor_gray_ddd bg_white touchstart">
        <dl class="rel h_in list_h_36em wm_94">
          <dt class="fl">多功能日期</dt>
          <dd class="fr rel w_70 mr_4">
            <input type="button" id="plug_multidate" class="fr bg_white c_gray_777" readonly value="" placeholder="请选择多功能日期" />
          </dd>
          <dd class="abs top_0 right_0">
            <i class="fr ion ion-ios-arrow-right text_16em c_gray_777"></i>
          </dd>
        </dl>
      </li>
    </ul>
  </div>

  <!----------Andrew_PreviewImage---------->
  <div class="rel press bg_white mt_5 clear">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">上传凭证</h3>
    <ul class="w_94 center length4 pt_5">
      <li class="rel fl mb_5">
        <label class="plug_previewImage bg_white dis_block text_al_c ovh rel w_80 h_5em line_h_5em border bor_gray_ddd">
          <i class="ion ion-plus text_24em line_h_16em text_bold c_gray_ddd text_al_m"></i>
          <input multiple type="file" />
        </label>
      </li>
      <li class="rel fl mb_5">
        <button type="button" class="plug_DelImage bg_white dis_block text_al_c ovh rel w_80 h_5em line_h_5em border bor_gray_ddd">
          <i class="ion ion-minus text_24em line_h_16em text_bold c_gray_ddd text_al_m"></i>
        </button>
      </li>
    </ul>
  </div>

  <!----------Andrew_SnInput---------->
  <div class="module press mt_5 ovh bg_white">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">支付密码</h3>
    <fieldset class="plug_sn_input pt_5 pb_5 ml_3 ovh">
      <input type="password" multiple class="wh_3em mr_05em bg_gray_f9f bor_gray_ddd c_gray_777 border bor_rad_0" />
      <input type="password" multiple class="wh_3em mr_05em bg_gray_f9f bor_gray_ddd c_gray_777 border bor_rad_0" />
      <input type="password" multiple class="wh_3em mr_05em bg_gray_f9f bor_gray_ddd c_gray_777 border bor_rad_0" />
      <input type="password" multiple class="wh_3em mr_05em bg_gray_f9f bor_gray_ddd c_gray_777 border bor_rad_0" />
      <input type="password" multiple class="wh_3em mr_05em bg_gray_f9f bor_gray_ddd c_gray_777 border bor_rad_0" />
      <input type="password" multiple class="wh_3em mr_05em bg_gray_f9f bor_gray_ddd c_gray_777 border bor_rad_0" />
    </fieldset>
  </div>

  <!----------Andrew_Textarea---------->
  <form action="#" method="get" onsubmit="return false;">
    <div class="module mt_5 plug_validate">
        <dl class="ovh bg_white">
          <dt class="press c_title bg_white pl_3 h_3em line_h_3em">感谢您为我提出宝贵意见</dt>
          <dd class="rel minus_mt_05em">
            <textarea class="plug_textarea ml_3 mr_3 w_94 h_12_em c_gray_777" placeholder="请输入遇到的问题或者意见..." required></textarea>
          </dd>
        </dl>
        <button type="submit" class="btn_h_3em wm_94 bg_title c_white mt_5 h_32em">提交</button>
    </div>
  </form>

  <!----------Andrew_lightSlider---------->
  <div class="module bg_white press mt_5 pb_3">
    <h3 class="bg_white c_title pl_3 mb_1em line_h_36em bor_bottom bor_gray_ddd">图片滑动展示</h3>
    <div class="wm_94 ovh rel">
      <ul id="plug_photo_slider">
      <li class="h_8em">
        <figure class="bg_gray_f5f border bor_gray_ddd h_in img_auto">
          <img src="./img/tibet-1.jpg" />
        </figure>
      </li>
      <li class="h_8em">
        <figure class="bg_gray_f5f border bor_gray_ddd h_in img_auto">
          <img src="./img/tibet-2.jpg" />
        </figure>
      </li>
      <li class="h_8em">
        <figure class="bg_gray_f5f border bor_gray_ddd h_in img_auto">
          <img src="./img/tibet-3.jpg" />
        </figure>
      </li>
      <li class="h_8em">
        <figure class="bg_gray_f5f border bor_gray_ddd h_in img_auto">
          <img src="./img/tibet-4.jpg" />
        </figure>
      </li>
      <li class="h_8em">
        <figure class="bg_gray_f5f border bor_gray_ddd h_in img_auto">
          <img src="./img/tibet-5.jpg" />
        </figure>
      </li>
      <li class="h_8em">
        <figure class="bg_gray_f5f border bor_gray_ddd h_in img_auto">
          <img src="./img/tibet-6.jpg" />
        </figure>
      </li>
    </ul>
    </div>
  </div>

  <!----------Andrew_DropUpDown---------->
  <div class="module list press mt_5">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">手风琴效果</h3>
    <ul class="plug_dropbutton">
      <li class="bg_white ovh bor_bottom bor_gray_ddd">
        <dl class="rel pl_3 ovh touchstart list_h_36em">
          <dt class="fl ovh">
            点击展开查看更多的内容1
          </dt>
          <dd class="abs wm_94 left_0 c_gray_999 text_al_r">
            <i class="text_16em ion ion-arrow-down-b"></i>
          </dd>
        </dl>
        <article class="ma_3 c_gray_777 line_h_18em">
          欢迎使用Andrew移动端jQuery插件。<br>
          当前内容是点击查看更多后的详情信息。
        </article>
      </li>
      <li class="bg_white ovh bor_bottom bor_gray_ddd">
        <dl class="rel pl_3 ovh touchstart list_h_36em">
          <dt class="fl ovh">
            点击展开查看更多的内容2
          </dt>
          <dd class="abs wm_94 left_0 c_gray_999 text_al_r">
            <i class="text_16em ion ion-arrow-down-b"></i>
          </dd>
        </dl>
        <article class="ma_3 c_gray_777 line_h_18em">
          欢迎使用Andrew移动端jQuery插件。<br>
          当前内容是点击查看更多后的详情信息。
        </article>
      </li>
      <li class="bg_white ovh bor_bottom bor_gray_ddd">
        <dl class="rel pl_3 ovh touchstart list_h_36em">
          <dt class="fl ovh">
            点击展开查看更多的内容3
          </dt>
          <dd class="abs wm_94 left_0 c_gray_999 text_al_r">
            <i class="text_16em ion ion-arrow-down-b"></i>
          </dd>
        </dl>
        <article class="ma_3 c_gray_777 line_h_18em">
          欢迎使用Andrew移动端jQuery插件。<br>
          当前内容是点击查看更多后的详情信息。
        </article>
      </li>
    </ul>
  </div>

  <!----------Andrew_AllChecked---------->
  <div class="module list press mt_5">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">全选功能</h3>
    <ul class="plug_allchk">
      <li class="bg_white">
        <dl class="rel line_h_36em ovh touchstart bor_bottom_dashed bor_gray_ddd">
          <dt class="fl ml_3 h_in">
            <input type="checkbox" name="checkbox2-2" class="plug_Checkbox" multiple value="0202" />
          </dt>
          <dd class="fl h_in ml_05em">全选/反选</dd>
        </dl>
        <ul class="ml_1em list_h_36em">
          <li class="bg_white ovh touchstart bor_bottom bor_gray_ddd">
            <dl class="rel h_in ovh">
              <dt class="fl ml_3 h_in">
                <input type="checkbox" name="checkbox2-2-1" class="plug_Checkbox" multiple value="020201" />
              </dt>
              <dd class="fl h_in ml_05em c_gray_777">笔记本电脑</dd>
              <dd class="fr mr_3 c_gray_999">￥<span class="c_in">4999.00</span></dd>
            </dl>
          </li>
          <li class="bg_white ovh touchstart bor_bottom bor_gray_ddd">
            <dl class="rel h_in ovh">
              <dt class="fl ml_3 h_in">
                <input type="checkbox" name="checkbox2-2-2" class="plug_Checkbox" multiple value="020202" />
              </dt>
              <dd class="fl h_in ml_05em c_gray_777">台式机电脑</dd>
              <dd class="fr mr_3 c_gray_999">￥<span class="c_in">3999.00</span></dd>
            </dl>
          </li>
          <li class="bg_white ovh touchstart bor_bottom bor_gray_ddd">
            <dl class="rel h_in ovh">
              <dt class="fl ml_3 h_in">
                <input type="checkbox" name="checkbox2-2-2" class="plug_Checkbox" multiple value="020202" />
              </dt>
              <dd class="fl h_in ml_05em c_gray_777">苹果手机</dd>
              <dd class="fr mr_3 c_gray_999">￥<span class="c_in">5999.00</span></dd>
            </dl>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <!----------Andrew_Viewer---------->
  <!----------Andrew_lazyload---------->
  <div class="module press mt_5 bg_white">
    <h3 class="bg_white c_title pl_3 line_h_36em bor_bottom bor_gray_ddd">图片放大展示</h3>
    <ul class="plug_viewer lazyload ml_3 mt_1em length2">
        <li class="fl ovh h_8em mb_1em">
          <figure class="w_94 border bor_gray_ddd img_auto h_in">
            <img data-original="./img/tibet-1.jpg" src="./img/thumbnails/tibet-1.jpg" alt="图片1" />
          </figure>
        </li>
        <li class="fl ovh h_8em mb_1em">
          <figure class="w_94 border bor_gray_ddd img_auto h_in">
            <img data-original="./img/tibet-2.jpg" src="./img/thumbnails/tibet-2.jpg" alt="图片2" />
          </figure>
        </li>
        <li class="fl ovh h_8em mb_1em">
          <figure class="w_94 border bor_gray_ddd img_auto h_in">
            <img data-original="./img/tibet-3.jpg" src="./img/thumbnails/tibet-3.jpg" alt="图片3" />
          </figure>
        </li>
        <li class="fl ovh h_8em mb_1em">
          <figure class="w_94 border bor_gray_ddd img_auto h_in">
            <img data-original="./img/tibet-4.jpg" src="./img/thumbnails/tibet-4.jpg" alt="图片4" />
          </figure>
        </li>
        <li class="fl ovh h_8em mb_1em">
          <figure class="w_94 border bor_gray_ddd img_auto h_in">
            <img data-original="./img/tibet-5.jpg" src="./img/thumbnails/tibet-5.jpg" alt="图片5" />
          </figure>
        </li>
        <li class="fl ovh h_8em mb_1em">
          <figure class="w_94 border bor_gray_ddd img_auto h_in">
            <img data-original="./img/tibet-6.jpg" src="./img/thumbnails/tibet-6.jpg" alt="图片6" />
          </figure>
        </li>
    </ul>
  </div>

  <!----------Andrew_PopupWin Start---------->
  <div id="plug_MenuWin" class="dis_none bg_white pa_3 w_100 mt_32em"> <!--顶部位置显示的弹窗-->
    <ul class="wp_94 c_gray_777">
      <li class="fl h_3em line_h_3em mr_1em">功能A</li>
      <li class="fl h_3em line_h_3em mr_1em">功能B</li>
      <li class="fl h_3em line_h_3em mr_1em">功能C</li>
      <li class="fl h_3em line_h_3em mr_1em">功能D</li>
      <li class="fl h_3em line_h_3em mr_1em">功能E</li>
      <li class="fl h_3em line_h_3em mr_1em">功能F</li>
      <li class="fl h_3em line_h_3em mr_1em">功能G</li>
      <li class="fl h_3em line_h_3em mr_1em">功能H</li>
    </ul>
  </div>

  <div id="plug_PopupWin" class="dis_none bg_white pa_5 w_85"> <!--中间位置显示的弹窗-->
    <button type="button" class="plug_closeIn dis_block wh_12em mt_01em mr_01em abs bg_white top_0 right_0 c_gray_333 text_18em ion ion-android-close"></button>
    <h2 class="text_bold press text_12em">弹窗标题</h2>
    <ul class="bor_top_dashed bor_gray_ddd mt_05em pt_05em c_gray_777">
      <li class="h_3em line_h_3em">弹窗内容显示中1</li>
      <li class="h_3em line_h_3em">弹窗内容显示中2</li>
      <li class="h_3em line_h_3em">弹窗内容显示中3</li>
    </ul>
  </div>

  <div id="plug_filterWin" class="dis_none w_100 ovh"> <!--对应位置显示的弹窗-->
    <ul class="abs ovh wp_94 bg_white bor_top bor_gray_ddd pt_3 pb_3 zindex_2 c_gray_777">
      <li class="fl h_3em line_h_3em mr_1em">筛选A</li>
      <li class="fl h_3em line_h_3em mr_1em">筛选B</li>
      <li class="fl h_3em line_h_3em mr_1em">筛选C</li>
      <li class="fl h_3em line_h_3em mr_1em">筛选D</li>
      <li class="fl h_3em line_h_3em mr_1em">筛选E</li>
      <li class="fl h_3em line_h_3em mr_1em">筛选F</li>
      <li class="fl h_3em line_h_3em mr_1em">筛选G</li>
      <li class="fl h_3em line_h_3em mr_1em">筛选H</li>
    </ul>
  </div>
  <!----------Andrew_PopupWin End---------->

</main>

<footer class="press bg_gray_f9f">
  <menu class="bor_gray_ddd bor_top">
    <button type="button" class="fl" data-href="#">
      <i class="text_18em c_gray_777"></i>
      <em class="text_08em c_gray_777">功能</em>
    </button>
    <button type="button" class="fl" data-href="ajax/page2.html">
      <i class="text_18em c_gray_777"></i>
      <em class="text_08em c_gray_777">聊天</em>
    </button>
    <button type="button" class="fl" data-href="ajax/page3.html">
      <i class="text_18em c_gray_777"></i>
      <em class="text_08em c_gray_777">时间轴</em>
    </button>
    <button type="button" class="fl" data-href="ajax/page4.html">
      <i class="text_18em c_gray_777"></i>
      <em class="text_08em c_gray_777">布局</em>
    </button>
  </menu>
</footer>
</body>
</html>